<template>
  <div class="course-Test">
    <!-- 头部信息 -->
    <div class="task-top">
      <section class="selections">
        <span>课件</span>
        <span>&gt;</span>
        <el-dropdown>
          <span class="el-dropdown-link" ref="subject">
            请选择科目
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <!-- <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in classList"
              @click="dropItemClick(index)"
            >{{item}}</el-dropdown-item>
          </el-dropdown-menu>-->
        </el-dropdown>
        <!-- <span>&gt;</span>
        <el-dropdown>
          <span class="el-dropdown-link" ref="course">
            请选择课程
            <i class="el-icon-arrow-down el-icon--right"></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              v-for="(item, index) in classList"
              @click="dropItemClick(index)"
              :key="index"
            >{{item}}</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>-->
      </section>
      <!-- <el-button round disabled>提交</el-button> -->
      <el-button round>提交</el-button>
    </div>

    <div class="content">
      <div class="hasList" v-if="list.radio.length != 0" ref="wrapper">
        <radio :radioTopic="list.radio" />
        <judge :judgeTopic="list.judge" />
      </div>

      <div class="noList" v-else>请选择你想要测试的科目</div>
    </div>
  </div>
</template>

<script>
import radio from '@/components/content/topicType/radio';
import judge from '@/components/content/topicType/judge';

// import vuescroll from 'vuescroll';

export default {
  name: 'CourseTest',
  components: {
    // vuescroll,
    radio,
    judge,
  },
  data() {
    return {
      list: {
        radio: [],
        judge: [],
      },
      classList: ['黄金糕', '狮子头', '螺蛳粉', '双皮奶', '蚵仔煎'],
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      let item1 = {
        answers: ['a'],
        courseId: null,
        coursePid: null,
        createTime: null,
        id: '1396000299453374466',
        kind: '0',
        situation: '0',
        sorce: null,
        submitAnswer: [],
        topicOptions: [2, 4, 6, 8],
        topicSubject: '双绞线电缆是由几根线组成的',
        updateTime: null,
      };
      let item2 = {
        answers: ['<p>true</p>'],
        courseId: null,
        coursePid: null,
        createTime: null,
        id: '1396000299453374466',
        kind: '2',
        situation: '0',
        sorce: null,
        submitAnswer: [],
        topicOptions: ['正确', '错误'],
        topicSubject: '双绞线电缆是由几根线组成的',
        updateTime: null,
      };

      for (let i = 0; i < 2; i++) {
        this.list.radio.push(item1);
        this.list.judge.push(item2);
      }
      console.log(this.list);
    },

    dropItemClick(index) {
      console.log(this.$refs['subject']);
      console.log(this.classList[index]);
    },
  },
};
</script>

<style scoped>
.course-Test {
  position: relative;
  background: #fff;
  padding: 0 30px;
  user-select: none;
}
.task-top {
  color: #181e33;
  padding: 19px 19px 14px 0;
  border-bottom: 1px solid #f2f2f2;
  display: flex;
  justify-content: space-between;
}

.selections {
  font-size: 16px;
  width: 368px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-dropdown-link {
  display: inline-block;
  width: 137px;
  height: 28px;
  line-height: 28px;
  text-align: center;
  cursor: pointer;
  border: 1px groove cyan;
}
.el-icon-arrow-down {
  font-size: 16px;
}

.content {
  margin-top: 8px;
  height: 90%;
  overflow-y: auto;
}
.noList {
  position: absolute;
  top: 44%;
  left: 50%;
  transform: translate(-34%, -50%);
  color: #a8a8b3;
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  line-height: 22px;
}
</style>